<style>
    .layui-form-item .layui-input-company {
        width: auto;
        padding-right: 10px;
        line-height: 38px;
    }

    .layuimini-main>div {
        flex: 1;
        margin-right: 25px;
    }

    .layuimini-main {
        display: flex;
        flex-wrap: wrap;
        height: 100%;
    }

    /* .topinput{
    display: flex;
    justify-content: center;
    white-space: nowrap;
    padding: 20px;
} */
    .inputC {
        width: 500px;
        padding: 10px;
    }
</style>
<div class="layuimini-container layuimini-page-anim" style="height: calc(100% - 30px);">

    <div class="layuimini-main">
        <div>
            <fieldset class="table-search-fieldset" style="margin-top: 20px;">
                <legend>
                    <h3>账号信息</h3>
                </legend>
                <div class="layui-form layuimini-form">
                    <div class="layui-form-item inputC">
                        <label class="layui-form-label required">管理账号</label>
                        <div class="layui-input-block">
                            <input type="text" name="username" lay-verify="required" lay-reqtext="管理账号不能为空"
                                placeholder="请输入管理账号" value="admin" class="layui-input">
                            <!-- <tip>填写自己管理账号的名称。</tip> -->
                        </div>
                    </div>
                    <div class="layui-form-item topinput">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
        <div>
            <fieldset class="table-search-fieldset" style="margin-top: 20px;">
                <legend>
                    <h3>修改密码</h3>
                </legend>
                <div class="layui-form layuimini-form">
                    <div class="layui-form-item inputC">
                        <label class="layui-form-label required">旧的密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="old_password" lay-verify="required" lay-reqtext="旧的密码不能为空"
                                placeholder="请输入旧的密码" value="" class="layui-input">
                            <!-- <tip>填写自己账号的旧的密码。</tip> -->
                        </div>
                    </div>

                    <div class="layui-form-item inputC">
                        <label class="layui-form-label required">新的密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="new_password" lay-verify="required" lay-reqtext="新的密码不能为空"
                                placeholder="请输入新的密码" value="" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item inputC">
                        <label class="layui-form-label required">再次输入新的密码</label>
                        <div class="layui-input-block">
                            <input type="password" name="again_password" lay-verify="required" lay-reqtext="新的密码不能为空"
                                placeholder="请输入新的密码" value="" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn2">确认保存</button>
                        </div>
                    </div>
                </div>
            </fieldset>
        </div>
    </div>

</div>
<script src="../js/api.js" charset="utf-8"></script>
<script src="../js/ajaxRequest.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'miniPage'], function () {
        var form = layui.form,
            layer = layui.layer,
            miniPage = layui.miniPage;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();
        GetUserName().then(function (responseData) {
            $("[name='username']").val(responseData)
        })
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            const postData = { username: data.field.username };
            EditUserName(postData)
            // var index = layer.alert(JSON.stringify(data.field), {
            //     title: '最终的提交信息'
            // }, function () {
            //     layer.close(index);
            //     miniPage.hashHome();
            // });
            return false;
        });
        //监听提交
        form.on('submit(saveBtn2)', function (data) {
            if (data.field.new_password != data.field.again_password) {
                layer.msg('两次输入的新密码不一致', { icon: 2 })
                return false
            }
            const postData = { oldpassWord: data.field.old_password, passWord: data.field.new_password };
            EditUserPassWord(postData)
            return false;
        });

    });
</script>